	$(function() {
		//var line1 = [['12:30',5],['12:31',6],['12:32',7],['12:33',2],['12:34',4],['12:35',8]];

		var timedata = document.getElementById("inputtimedata").value;
		//alert(lightdata);
		var timearray = new Array();
		timearray = timedata.split(",");
		//alert(timedata); 
		var xlabel = "The lastest datas to " + timearray[0];
		//alert(xlabel);

		// first fic
		var lightdata = document.getElementById("inputlightdata").value;
		//alert(lightdata);
		var lightarray = new Array();
		lightarray = lightdata.split(",");
		var lightarrayint = new Array();
		for (var i = 0; i < lightarray.length; i++) {
			lightarrayint[i] = parseInt(lightarray[i]);
		}

		var plot1 = $.jqplot('chart1', [ lightarrayint ], {
			title : 'Light Sensor',
			legend : {
				show : true,
				location : 'ne'
			},
			series : [ {
				label : 'Light',
				markerOptions : {
					size : 6,
					style : "x"
				}
			} ],
			seriesDefaults : {
				//  pointLabels:{show:true,ypadding:-1},
				color : '#880000',
			},
			axesDefaults : {
				tickRenderer : $.jqplot.CanvasAxisTickRenderer,
				tickOptions : {
					angle : 10,//x angle
					fontSize : '10pt',
				}
			},
			axes : {
				xaxis : {
					label : xlabel,
					tickOptions : {
						fontSize : '10pt'
					},
					mark : 'cross',
					ticks : [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
							15, 16, 17, 18, 19, 20 ],
					tickOptions : {
						formatString : '%d',
						fontSize : '10pt'
					},

				},
				yaxis : {
					label : "data",
					tickOptions : {
						formatString : '%.2f',
						fontSize : '10pt'
					},
					min : 0
				}
			},
			cursor : {
				show : true,
				showTooltip : true
			},
			highlighter : {
				lineWidthAdjust : 20,
				sizeAdjust : 20,
				showTooltip : true,
				tooltipLocation : 'nw',
				fadeTooltip : true
			}

		});
		//second fic.
		var temdata = document.getElementById("inputtemdata").value;
		//alert(temdata);
		var temarray = new Array();
		temarray = temdata.split(",");
		var temarrayfloat = new Array();
		for (var i = 0; i < temarray.length; i++) {
			temarrayfloat[i] = parseFloat(temarray[i]);
		}
		var plot2 = $.jqplot('chart2', [ temarrayfloat ], {
			title : 'Temperature Sensor',
			legend : {
				show : true,
				location : 'ne'
			},
			series : [ {
				label : 'Temperature',
				markerOptions : {
					size : 6,
					style : "circle"
				}
			} ],
			seriesDefaults : {
				// pointLabels:{show:true,ypadding:-1},
				color : '#008800',
			},
			axesDefaults : {
				tickRenderer : $.jqplot.CanvasAxisTickRenderer,
				tickOptions : {
					angle : 10,//x angle
					fontSize : '10pt'

				}
			},
			axes : {
				xaxis : {
					label : xlabel,
					tickOptions : {
						fontSize : '10pt'
					},
					mark : 'cross',
					ticks : [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
							15, 16, 17, 18, 19, 20 ],
					tickOptions : {
						formatString : '%d',
						fontSize : '10pt'
					}
				},
				yaxis : {
					label : "data",
					tickOptions : {
						formatString : '%.2f',
						fontSize : '10pt'
					},
					min : 0,
					max : 45
				}
			},
			cursor : {
				show : true,
				showTooltip : true
			},
			highlighter : {
				lineWidthAdjust : 20,
				sizeAdjust : 20,
				showTooltip : true,
				tooltipLocation : 'nw',
				fadeTooltip : true
			}

		});
		//third fic.
		var humdata = document.getElementById("inputhumdata").value;
		//alert(humdata);
		var humarray = new Array();
		humarray = humdata.split(",");
		var humarrayfloat = new Array();
		for (var i = 0; i < humarray.length; i++) {
			humarrayfloat[i] = parseFloat(humarray[i]);
		}
		var plot3 = $.jqplot('chart3', [ humarrayfloat ], {
			title : 'Humidity Data',
			legend : {
				show : true,
				location : 'ne'
			},
			series : [ {
				label : 'Humidity',
				markerOptions : {
					size : 6,
					style : "diamond"
				}
			} ],
			seriesDefaults : {
				//   pointLabels:{show:true,ypadding:-1},
				color : '#000088',
			},
			axesDefaults : {
				tickRenderer : $.jqplot.CanvasAxisTickRenderer,
				tickOptions : {
					angle : 10,//x angle
					fontSize : '10pt'
				}
			},
			axes : {
				xaxis : {
					label : xlabel,
					tickOptions : {
						fontSize : '10pt'
					},
					mark : 'cross',
					ticks : [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
							15, 16, 17, 18, 19, 20 ],
					tickOptions : {
						formatString : '%d',
						fontSize : '10pt'
					}
				},
				yaxis : {
					label : "%",
					tickOptions : {
						formatString : '%.2f',
						fontSize : '10pt'
					},
					min : 0,
					max : 100
				}

			},
			cursor : {
				show : true,
				showTooltip : true
			},
			highlighter : {
				lineWidthAdjust : 20,
				sizeAdjust : 20,
				showTooltip : true,
				tooltipLocation : 'nw',
				fadeTooltip : true
			}

		});

	})
